<template>
	<!--
		轮播图区域 
		indicator-dots:是否显示面板指示点
		autoplay:是否自动切换
		interval:自动切换时间间隔
		duration:滑动动画时长
		indicator-color:指示器默认颜色
		indicator-active-color:当前选中的指示点颜色
	-->
	<swiper :indicator-dots="true" 
			:autoplay="true" 
			:interval="3000" 
			:duration="1000" 
			indicator-active-color="red"
			:circular="true"
			class="swiper-container">
		<swiper-item v-for="(item,index) in swiperListData" :key="index">
			<!-- #ifdef H5 -->
			<image :src="`http:${item.image}`" mode="" class="swiper-image"></image>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<image :src="item.image" mode="" class="swiper-image"></image>
			<!-- #endif -->
		</swiper-item>
	</swiper>
</template>

<script>
	export default{
		props:{
			swiperListData:{
				type:Array
			}
		}
	}
</script>

<style lang="scss">
	.swiper-container{
		width: 750rpx;
		.swiper-image{
			width: 100%;
			height: 100%;
		}
		
	}
</style>